import React, { Component } from "react"
import Styles from '@/scss/rights.scss'
import { toJS } from 'mobx'
//引入自己的工具包
import dateUtils from "@/utils/dateutils"
//引入常量
import CONSTS from "@/inits/consts"
const STATE = CONSTS.STATE
class ListRender extends Component<any, any>{
  //判断是否已经选择
  Batchdels = (e: IeventType) => {
    this.props.Func.addBatchdels(e) //调用父类传入的 添加减少批量列表方法
  }

  //判断是批量选择还是直接点击
  thisOnclick = (e: IeventType) => {
    this.props.batchdel ? this.Batchdels(e) : this.props.Func.handleGetTodoByid(e)
  }
  //判断是否被选中
  isBatchdel = (id: string) => {
    let flag = false
    this.props.batchdels.map(item => { if (id == item && this.props.batchdel) flag = true })
    return flag
  }

  //待办列表渲染通用组件函数
  listRender = (Arr: any) => {
    return Arr.map(item => {
      item = toJS(item)
      const Day = dateUtils.computedDay(item.deadline)//调用自己写的工具类,得出过期时间与当前时间相差的天数
      return (<li className={this.isBatchdel(item.id) ? Styles.li_check : ""} key={item.id} data-check={false} data-tag={item.id} onClick={(e: any) => this.thisOnclick(e)} >  {/* 将id作为key以及自定义属性,方便之后获取当前li的todo的id */}
        {/* 一、显示待办事件的内容 */}
        <div className={Styles.li_content} data-check={false} data-tag={item.id} >  <span data-check={false} data-tag={item.id}> {item.content}</span> </div>
        {/* 二、内容下方的到期日期与状态按钮 渲染 */}
        <div className={Styles.li_time} data-check={false} data-tag={item.id}>
          {/* 此处调用日期工具类中的computedDayShow方法  判断到期事件是否只剩下一天,如果是,将样式标红类名赋值上去 */}
          <div data-tag={item.id} className={dateUtils.computedDayShow(item.deadline) ? Styles.expire : ""} ><span></span> {Day}<span>&nbsp;</span> </div>{/* 距离到期时间 */}
          {/* 用三元判断渲染列表按钮是什么 此处两个三元是因为有三个条件 */}
          {item.state == STATE.DONE ?
            <div onClick={(e) => { this.props.Func.handleDone(e, CONSTS.STATE.UNDONE) }} className={Styles.done}>已完成</div> ://如果是完成状态
            item.state == STATE.UNDONE ?
              <div onClick={(e) => { this.props.Func.handleDone(e, CONSTS.STATE.DONE) }} className={Styles.undone}>完成</div> ://如果是未完成状态
              <div onClick={(e) => { this.props.Func.handleDone(e, CONSTS.STATE.REDUCTION) }} className={Styles.recycle}>还原</div> //如果是回收站状态
          } </div>
      </li>)
    })
  }
  render() {
    return (
      <div>
        {this.listRender(this.props.arr)}
      </div>
    )
  }
}
export default ListRender